<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  使用组件 父传值 给子组件-->
<!--v-bind是不支持驼峰命名-->
<!--  <cpn1 v-bind:cInfo="info"></cpn1>-->

<!--  驼峰命名 必须转换 如下 cInfo c-info-->
  <cpn1 :c-info="info"></cpn1>

</div>

<!--// 1 写组件模板-->
<template id="cpn1">
<!--  在写子组件模板 使用div 作为根-->
  <div>
    <h1 v-for="item in cInfo">{{item}}</h1>
  </div>
</template>



  <script src="../js/vue.js"></script>
<script>

  //1 编写组件
  const cpn1 = {
    template:'#cpn1',
    data(){
      return{

      }
    },
    props:{
      movies:{
        type:String,
        default:'后翼弃兵'
      },
      cInfo:{
        type:Object,
        default(){

        },
      }
    }

  }


  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      movies:'信条',
      info:{
        name: 'xiaoliang',
        age:24,
        height:1.80
      }

    },
    methods:{

    },
    //3 注册组件
    components:{
      cpn1
    }

  })
</script>
</body>
</html>